<template>
  <div class="sub-application-container">
    <micro-app
      id="children_application"
      class="children_application"
      :name="route.name"
      :url="route?.meta?.url"
      :baseroute="route.meta?.baseRoute"
      iframe
      fiber
      router-mode="native-scope"
      @created="created"
      @beforemount="beforemount"
      @mounted="mounted"
      @unmount="unmount"
      @error="error"
      :data="microAppData"
    />
  </div>
</template>
<script setup lang="tsx">
import microApp from '@micro-zoe/micro-app'
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
import { ref, watch } from 'vue'

const route = useRoute()
const router = useRouter()

// 创建数据对象，用于传递给子应用
const microAppData = ref({
  path: route.path,
  fullPath: route.fullPath,
  timestamp: Date.now()
})

// 监听路由变化，更新数据
watch(() => route.path, (newPath) => {
  console.log('主应用路由变化:', newPath)
  microAppData.value = {
    path: newPath,
    fullPath: route.fullPath,
    timestamp: Date.now()
  }
})

// 路由更新前
onBeforeRouteUpdate((to, from) => {
  console.log('主应用路由更新前:', from.path, '->', to.path)
})

function created() {
  console.info('微前端被创建')
}
function beforemount() {
  console.info('子应用即将渲染')
}
function mounted() {
  console.info('子应用已经渲染完成')
}
function unmount() {
  console.info('子应用已经卸载')
}
function error() {
  console.info('子应用加载出错')
}

</script>
<style scoped lang="scss">
.sub-application-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.children-page_content {
  padding: 12px;
  background-color: var(--el-bg-color);
  border-radius: 8px;
  border: 1px solid var(--el-border-color-light);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 8px;
}

.children_application {
  flex: 1;
  display: flex;
  width: 100%;
  height: 100%;

  :deep(micro-app-body) {
    width: 100%;
    height: 100%;
    flex: 1;
    display: block;
  }

  :deep(iframe) {
    width: 100%;
    height: 100%;
    border: none;
  }
}
</style>
